<template>
  <div>
    <van-dropdown-menu active-color='#FE8B01' :overlay='overlaya'>
        <!-- 成果类型 -->
        <van-dropdown-item :title="achievementsTitle"
            @open='dropdown_open(0)'
            :title-class="headerActive=== 0 ? 'dropdown_item' : ''"
            ref="item" >
            <van-cell v-for="(item,index) in achievementsData" :key="item.label" :title="item.label"
                :class="{ activeclass: index  === num }"
                @click="handleachievements(index,item.value,)"
            />
            <div class="resetBtn">
                 <van-button type="default" round style="color: #666; width: 50%"  @click="resetBtn('item')">{{$t('message.cz')}}</van-button>
            </div>
        </van-dropdown-item>
        <!-- 行业领域 -->
        <van-dropdown-item :title="industryTitle" ref="item1" :title-class="headerActive===1 ? 'dropdown_item' : ''"  @open='dropdown_open(1)'>
            <van-tree-select :items="serviceArrCall" :main-active-index.sync="active" @click-nav="clickNav">
                <template #content>
                    <div v-for="(items,ind) in serviceArrCall" :key="ind">
                        <div v-if=" active === ind ">
                           <van-cell v-for="(item, industry) in items.children"  :key="item.dictName" :title="item.dictName"
                                :class="{ activeclass: industry  === num1 }"
                                @click="handleindustry(industry,item.dictCode,item.dictName, 1)"
                            /> 
                        </div>
                    </div>
                </template>
            </van-tree-select>
            <div class="resetBtn">
                <van-button type="default" round style="color: #666; width: 50%"   @click="resetBtn('item1')">{{$t('message.cz')}}</van-button>
            </div>
        </van-dropdown-item>
        <!-- 境内外 -->
        <van-dropdown-item :title="domesticTitle" ref="item2" v-model="region" @open='dropdown_open(2)' :title-class="headerActive===2 ? 'dropdown_item' : ''" >
           <van-cell v-for="(item,index) in regionType" :key="index" :title="item.label" :class="{ activeclass: index  === num2 }" @click="handleJing(index,item.value, item.label, 2)"/>
             <div class="resetBtn">
                <van-button type="default" round style="color: #666; width: 40%"   @click="resetBtn('item2')">{{$t('message.cz')}}</van-button>
            </div>
        </van-dropdown-item>
        <!-- 状态 -->
        <van-dropdown-item :title="stateTitlt" ref="item3" @open='dropdown_open(3)' :title-class="headerActive===3 ? 'dropdown_item' : ''" >
            <van-tree-select :items="statTypes" :main-active-index.sync="active" @click-nav="clickNav" >
                <template #content>
                    <div v-for="(item,index) in statTypeDetail.agreement" :key="item.label">
                        <van-cell  :title="item.label"
                            :class="{ activeclass: index  === num3 }"
                            v-if=" active === 0"
                            @click="handleaType(index,item.value,)"
                        />
                    </div>
                    <div v-for="(item,indexs) in statTypeDetail.projectTracking" :key="item.label">
                        <van-cell :title="item.label"
                            :class="{ activeclass: indexs  === num4 }"
                            v-if=" active === 1"
                            @click="handleaType1(indexs,item.value,)"
                        />
                    </div>
                </template>
            </van-tree-select>
            <div class="resetBtn">
                <van-button type="default" round style="color: #666; width: 50%"   @click="resetBtn('item3')">{{$t('message.cz')}}</van-button>
            </div>
        </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
    name: 'HomeNav',
    props: {
        achievementsData: {
            type: Array,
            default: () => []
        },
        regionType: {
            type: Array,
            default: () => []
        },
        statType: {
            type: Array,
            default: () => []
        },
        serviceArr: {
            type: Array,
            default: () => []
        },
        statTypeDetail: {
            type: Object,
            default: () => {}
        },
        overlaya: {
            type: Boolean,
            default: true 
        },
    },
     data() {
        return {
            active: 0,
            headerActive: '',
            disabledTrue: false,
            num: '',
            num1: '',
            num2: '',
            num3: '',
            num4: '',
            stateTitlt: Cookies.get("site_lang")==="en-US"?'Status':'状态',
            domesticTitle:Cookies.get("site_lang")==="en-US"?'Domestic or overseas':'境内外',
            industryTitle: Cookies.get("site_lang")==="en-US"?'Industry Sector':'行业领域',
            achievementsTitle: Cookies.get("site_lang")==="en-US"?'Achievements Type':'成果类型', 
            pageSize:10,
            //埋点数据
            clstag: [
                {
                    value: 0,
                    content: "pageclick|keycount|M_result_screen_achieve_type|achievement_type_Agreements"
                },
                {
                    value: 1,
                    content: "pageclick|keycount|M_result_screen_achieve_type|achievement_type_Transactions "
                },
                {
                    value: 2,
                    content: "pageclick|keycount|M_result_screen_achieve_type|achievement_type_Investment"
                },
                {
                    value: 3,
                    content: "pageclick|keycount|M_result_screen_achieve_type|achievement_type_Authoritative"
                },
                {
                    value: 4,
                    content: "pageclick|keycount|M_result_screen_achieve_type|achievement_type_Platforms"
                },
                {
                    value: 5,
                    content: "pageclick|keycount|M_result_screen_achieve_type|achievement_type_Innovations"
                }
            ],
            border: [
                {
                  value: 0,
                  content: "pageclick|keycount|M_result_screen_Border|border_domestic"
                },
                {
                  value: 1,
                  content: "pageclick|keycount|M_result_screen_Border|border_overseas"
                }
            ],
        };
    },
    methods: {
        dropdown_open (index) {
            this.headerActive = index;
        },
        // 重置按钮
        resetBtn(ref) {
            if(ref == 'item') {
                this.num = '';
                this.achievementsTitle = this.$t("message.cglx");
                this.$emit('reset', {num: 1, type: 'businessType'})
                this.$refs.item.toggle();
            } else if(ref == 'item1') {
                this.num1 = '';
                this.industryTitle =this.$t("message.hyly");
                this.$emit('reset', {num: 2, type: 'fieldTwo'})
                this.$refs.item1.toggle();
            } else if (ref == 'item2' ) {
                this.num2 = '';
                this.domesticTitle = this.$t("message.jnw");
                this.$emit('reset', {num: 3, type: 'border'})
                this.$refs.item2.toggle();
            } else if (ref == 'item3' ) { 
                this.num3 = '';
                this.num4 = '';
                this.stateTitlt =  this.$t("message.zt");
                this.$emit('reset', {num: 4, type: 'approvalStatus'})
                this.$refs.item3.toggle();
            }
            this.headerActive = null;
            this.active = 0;
        },
        /**
         * 点击成果类型下拉选项中每一项事件， 传索引，value值
         */
        clickNav(){
            this.num = '';
            this.num1 = '';
            this.num2 = '';
            this.num3 = '';
            this.num4 = ''
        },
        // // 成果类型
        handleachievements (index, value) {
            this.num = index
            // this.headerActive =id;
            this.el = this.$refs.item
            this.achievementsTitle = this.achievementsData[index].label
            let elements = this.$refs.item.$el.children[0].children[1].children;
            this.clstag.forEach((v, i) => {
                if (i === index) {
                elements[i].setAttribute("clstag", v.content);
                }
            });
            this.$emit('achievementsCall', {value, type: 'businessType'})
            this.$refs.item.toggle();
        }, 
        // 行业
        handleindustry(index, value, name) {
            this.num1 = index
            // this.headerActive =id;
            // this.domesticTitle = value;
            this.industryTitle = name;
            this.$emit('achievementsCall', {value, type: 'fieldTwo'})
            this.$refs.item1.toggle();
        },
        //境内外
        handleJing(index, value ) {
            this.num2 = index;
            let elements = this.$refs.item2.$el.children[0].children[1].children;
            this.border.forEach((v, i) => {
               if (i === index) {
                 elements[i].setAttribute("clstag", v.content);
               }
            });
            this.domesticTitle = this.regionType[index].label
            this.$emit('achievementsCall', {value, type: 'border'})
            this.$refs.item2.toggle();
        },
        // 状态1
        handleaType(index, value) {
            this.num3 = index
            this.$emit('achievementsCall', {value, type: 'approvalStatus'})
              this.$refs.item3.toggle();
              this.stateTitlt = this.statTypeDetail.agreement[index].label
        },
        // 状态2
        handleaType1(index, value) {
            this.num4 = index
            this.$emit('achievementsCall', {value, type: 'approvalStatus'})
            this.$refs.item3.toggle();
            this.stateTitlt = this.statTypeDetail.projectTracking[index].label
        },
    },
    computed: {
        statTypes() {
        return this.statType.map(item => {
            return { text: item.label };
        });
        },
        serviceArrCall() {
            return this.serviceArr.map(item => {
                return {
                text: item.dictName,
                children: item.serviceList
                };
            });
        },
        region() {
            return this.statType.map(item => {
                return {
                    value: item.label
                }
            })
        }
    },
};
</script>

<style scoped>
.van-sidebar-item--select,
.van-sidebar-item--select:active {
  background-color: #fe8b01;
  color: #ffffff;
}
.van-sidebar-item--select::before {
  background: none;
}
.activeclass {
  color: #fe8b01;
}
.resetBtn {
    padding: 12px;
    text-align: center;
}
::v-deep .dropdown_item {
    color: rgb(254, 139, 1);
    /* width: 80px; */
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
</style>